<template>
  <el-container style="height:100%;" class="table_wrap">
    <el-main style="padding:0;">
      <el-card class="box-card">
        <el-form label-position="right" label-width="100px" size="mini" :inline="true" ref="refform"
          class="demo-form-inline wrap_inline">
          <div style="margin: 20px 0 20px 20px">
            互动事件 &nbsp;&nbsp;
            {{ thingData.region }}在{{ thingData.regulateStartTime }}-{{
              thingData.regulateEndTime }}时间段调控{{ thingData.volumetric }}kW
          </div>
          <el-form-item>
            <el-button style="margin-left: 20px" type="primary" @click="checkGroup">选择调控分组</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="box-card">
        <el-table :data="PlanData" style="width: 100%">
          <el-table-column show-overflow-tooltip type="index" width="50" label="序号"></el-table-column>
          <el-table-column show-overflow-tooltip label="分组名称" prop="groupingName" width="180"></el-table-column>
          <el-table-column show-overflow-tooltip label="分组类型" prop="groupingType" width="120"></el-table-column>
          <el-table-column show-overflow-tooltip label="所属区域" prop="respectiveRegional"></el-table-column>
          <el-table-column show-overflow-tooltip label="运营商" prop="operator"></el-table-column>
          <el-table-column show-overflow-tooltip label="调控上限" prop="regulateUpper"></el-table-column>
          <el-table-column show-overflow-tooltip label="调控下限" prop="regulateFloor"></el-table-column>
          <el-table-column width="260" label="调控比例">
            <template slot-scope="scope">
              <!-- <el-input-number v-model="scope.row.ratio" @change="editProportion(scope.row)" :precision="2" :min="1"
                :max="100" label="描述文字"></el-input-number> -->
              <el-input v-model="scope.row.ratio" placeholder="请输入内容" @input="editProportion(scope.row)"></el-input>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="调控负荷">
            <template slot-scope="scope">
              <el-input v-model="scope.row.regulateLoad"></el-input>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="充电场站类型" prop="chargeStation"></el-table-column>
          <el-table-column show-overflow-tooltip label="场站个数" prop="stationsSize" align="center"></el-table-column>
        </el-table>
        <div class="boxxxxxxxx">
          <div class="brokenLine">
            <div id="brokenLine"></div>
          </div>
          <el-button style="border-radius: 4px 4px 4px 4px" type="primary" @click="save">保存数据</el-button>
          <el-button style="border-radius: 4px 4px 4px 4px" type="primary" @click="issued">下发指令</el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import * as echarts from "echarts";
import {
  carPlanProupEdit,
  addCarPotentialAnalyseChart,
} from "@/api/carNetworkInteraction/index.js";
import pagetable from "@/components/pagetable";
export default {
  name: "institution",
  components: { pagetable },
  data() {
    return {
      pageSize: 10,
      currentPage: 1,
      proportion: '',
      xTime: [],
      curveList: [],
      superiorLimit: [],
      lowerLimit: [],
      targetValue: [],
      pList: [],
      orderList: [],
      regulateNeedName: '',
      thingData: {},
      number1: 0,
      number2: 0,
      number3: 0,
    };
  },
  computed: {
    total() {
      var count = 0;
      this.PlanData.forEach((item) => {
        count += Number(item.ratio);
      })
      return Number(count);
    },
  },
  props: {
    PlanData: {
      type: Array,
      default: function () {
        return [];
      }
    },
    carPotentialAnalyses: {
      type: Object,
      default: function () {
        return {};
      }
    }
  },
  watch: {
    carPotentialAnalyses(newVal, oldVal) {
      this.chartData = newVal.carYcPZrList;
      if (newVal.carGroupingRegulates != null) {
        newVal.carGroupingRegulates.forEach((item) => {
          item.regulateLoad = (item.ratio / 100 * this.thingData.volumetric).toFixed(2)
        });
        this.PlanData = newVal.carGroupingRegulates;
      }else{
        this.PlanData = [];
      }
      this.xTime = [];
      this.superiorLimit = [];
      this.lowerLimit = [];
      this.targetValue = [];
      this.pList = [];
      if (newVal.carYcPZrList != null) {
        newVal.carYcPZrList.forEach(i => {
          this.xTime.push(i.hourTime);
          this.superiorLimit.push(i.up);
          this.lowerLimit.push(i.down);
          this.targetValue.push(i.target);
          this.pList.push(i.p);
        });
      }
      this.$nextTick(() => {
        this.init1();
      })
    }
  },
  methods: {
    handleInput() {
      if (this.total > 100) {
        const exceed = this.total - 100;
        if (this.number1 >= exceed) {
          this.number1 -= exceed;
        } else if (this.number2 >= exceed) {
          this.number2 -= exceed;
        } else if (this.number3 >= exceed) {
          this.number3 -= exceed;
        }
      }
    },
    //选择分组
    checkGroup() {
      this.$parent.$parent.open(this.PlanData);
    },
    //获取列表中行数据
    getCharts(row) {
      this.thingData = row
    },
    editProportion(row) {
      if (this.total > 100) {
        const exceed = this.total - 100;
        if (row.ratio >= exceed) {
          row.ratio -= exceed;
          row.regulateLoad = row.ratio / 100 * this.thingData.volumetric;
        }
        console.log(exceed, '数据')
      }
    },
    send(newVal) {
      this.orderList = newVal;
    },
    save() {
      let count = 0;
      this.PlanData.forEach((item) => {
        count += item.ratio
      })
      if (count > 100) {
        return this.$message.error('调控比例总数不能超过100%!')
      }
      let plandate = this.PlanData.map(item => {
        return {
          planId: this.thingData.id,
          groupId: item.id,
          regulateLoad: item.regulateLoad,
          groupName: item.groupingName,
          ratioGroup: item.ratio
        };
      });
      this.PlanData.forEach((item1, index) => {
        item1.stationNumber += item1.stationsSize
      })
      carPlanProupEdit(plandate).then(res => {
        if (res.code == 200) {
        }
      });
      this.$message.success("保存成功");
    },

    //下发指令
    issued() {
      this.$parent.$parent.issued(this.chartData);
    },
    //e-charts
    init1() {
      if (myChart) {
        myChart.clear()
      }
      var chartDom = document.getElementById("brokenLine");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        grid: {
          left: "50px",
          right: "0%"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["目标曲线", "预测曲线", "可调负荷上限", "可调负荷下限"]
        },
        xAxis: {
          type: "category",
          data: this.xTime
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "目标曲线",
            data: this.targetValue,
            type: "line"
          },

          {
            name: "预测曲线",
            data: this.pList,
            type: "line"
          },
          {
            name: "可调负荷上限",
            data: this.superiorLimit,
            type: "line"
          },
          {
            name: "可调负荷下限",
            data: this.lowerLimit,
            type: "line"
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#brokenLine {
  height: 300px;
  width: 100%;
}

.boxxxxxxxx {
  text-align: center;
}
</style>
